<template>
    <div class="municipal">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理市政管理平台</span>
            </p>
            <!-- 市政管理范围一张图 -->
            <div class="deadline-box">市政管理范围一张图</div>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- 中央“市政管理范围一张图” -->
            <div class="center-text">市政管理范围一张图</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" src="../../assets/img/municipal/open.png" alt="展开" @click="collapsePage(1)">
                <img id="closePage" src="../../assets/img/municipal/close.png" alt="收起" @click="collapsePage(2)">
            </div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>城市道路</span>
                </div>
                <div class="right-title-name">
                    <span>城市排水设施</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 城市道路 -->
                        <div class="border-box city-road">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="road-switch-block">
                                    <div id="roadSwitchLeft" class="road-switch-left switch-block-active" @click="switchRoadBlock(1)">市政道路</div>
                                    <div id="roadSwitchRight" class="road-switch-right switch-block-no" @click="switchRoadBlock(2)">人行道</div>
                                </div>
                                <div id="roadChart"></div>
                            </div>
                        </div>
                        <!-- 消防栓统计 -->
                        <ul class="border-box block-style fire-hydrant">
                            <li class="item-name">
                                <span>消防栓</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>110</span>
                                    <span>个</span>
                                </span>
                                <span>消防栓总数</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>96</span>
                                    <span>条</span>
                                </span>
                                <span>道路覆盖</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>24</span>
                                    <span>%</span>
                                </span>
                                <span>道路覆盖率</span>
                            </li>
                        </ul>
                        <!-- 其他统计（标识牌、隔离设施等） -->
                        <div class="border-box other-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="other-switch-block">
                                    <div id="otherSwitchLeft" class="other-switch-left switch-block-active" @click="switchOtherBlock(1)">标识牌</div>
                                    <div id="otherSwitchCenter1" class="other-switch-center1 switch-block-no" @click="switchOtherBlock(2)">隔离设施</div>
                                    <div id="otherSwitchCenter2" class="other-switch-center2 switch-block-no" @click="switchOtherBlock(3)">路名牌</div>
                                    <div id="otherSwitchRight" class="other-switch-right switch-block-no" @click="switchOtherBlock(4)">路牌</div>
                                    <div id="otherSwitchRight1" class="other-switch-right1 switch-block-no" @click="switchOtherBlock(5)">消防栓</div>
                                </div>
                                <div class="descript-chart">
                                    <ul class="left-content">
                                        <li class="">
                                            <span>消防栓总数：</span>
                                            <span>1100</span>
                                            <span>个</span>
                                        </li>
                                        <li class="">
                                            <span>道路覆盖：</span>
                                            <span>147</span>
                                            <span>条</span>
                                        </li>
                                        <li class="">
                                            <span>道路覆盖率：</span>
                                            <span>83.05</span>
                                            <span>%</span>
                                        </li>
                                    </ul>
                                    <div id="otherChart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 城市桥涵名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>城市桥涵</span>
                        </div>
                        <!-- 城市桥涵列表 -->
                        <div class="border-box city-bridge">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="bridge-switch-block">
                                    <div id="bridgeSwitchLeft" class="bridge-switch-left switch-block-active" @click="switchBridgeBlock(1)">人行天桥：12个</div>
                                    <div id="bridgeSwitchCenter" class="bridge-switch-center switch-block-no" @click="switchBridgeBlock(2)">涵洞：4个</div>
                                    <div id="bridgeSwitchRight" class="bridge-switch-right switch-block-no" @click="switchBridgeBlock(3)">跨线桥：12个</div>
                                </div>
                                <div class="table-head">
                                    <table>
                                        <tr>
                                            <td>名称</td>
                                            <td>地址</td>
                                            <td>所属道路</td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="tableBody" class="table-body">
                                    <div id="tableBodyBox">
                                        <table>
                                            <tr>
                                                <td>文理学院人行天桥</td>
                                                <td>太白南路科技六路北口</td>
                                                <td>太白路</td>
                                            </tr>
                                            <tr>
                                                <td>文理学院人行天桥</td>
                                                <td>太白南路科技六路北口</td>
                                                <td>太白路</td>
                                            </tr>
                                            <tr>
                                                <td>文理学院人行天桥</td>
                                                <td>太白南路科技六路北口</td>
                                                <td>太白路</td>
                                            </tr>
                                            <tr>
                                                <td>文理学院人行天桥</td>
                                                <td>太白南路科技六路北口</td>
                                                <td>太白路</td>
                                            </tr>
                                            <tr>
                                                <td>文理学院人行天桥</td>
                                                <td>太白南路科技六路北口</td>
                                                <td>太白路</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="tableBodyBox1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row"></div>
                    <div class="right-content-row">
                        <!-- 城市排水设施 -->
                        <div class="border-box drainage-facilities">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="dra-switch-block">
                                    <div id="draSwitchLeft" class="dra-switch-left switch-block-active" @click="switchDraBlock(1)">雨污水管网</div>
                                    <div id="draSwitchRight" class="dra-switch-right switch-block-no" @click="switchDraBlock(2)">中水管网</div>
                                </div>
                                <ul class=" block-style">
                                    <li class="item-block">
                                        <span>
                                            <span>21878</span>
                                            <span>座</span>
                                        </span>
                                        <span>检查井总量</span>
                                    </li>
                                    <li class="item-block">
                                        <span>
                                            <span>124</span>
                                            <span>条</span>
                                        </span>
                                        <span>覆盖道路数量</span>
                                    </li>
                                    <li class="item-block">
                                        <span>
                                            <span>70.06</span>
                                            <span>%</span>
                                        </span>
                                        <span>雨污水管网覆盖率</span>
                                    </li>
                                </ul>
                                <div id="pipeChart"></div>
                            </div>
                        </div>
                        <!-- 城市防洪设施 -->
                        <ul class="border-box block-style">
                            <li class="item-name">
                                <span>城市防洪设施</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>0.3</span>
                                    <span>个 / KM²</span>
                                </span>
                                <span>积水内涝点密度</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>22</span>
                                    <span>处</span>
                                </span>
                                <span>积水点数量</span>
                            </li>
                            <li class="item-block">
                                <span>
                                    <span>27.27</span>
                                    <span>%</span>
                                </span>
                                <span>整改完成率</span>
                            </li>
                        </ul>
                        <!-- 城市桥涵名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>城市桥涵</span>
                        </div>
                        <!-- 路灯统计相关 -->
                        <div class="border-box lamp-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="lamp-switch-block">
                                    <div id="lampSwitchLeft" class="lamp-switch-left switch-block-active" @click="switchLampBlock(1)">信号灯</div>
                                    <div id="lampSwitchCenter" class="lamp-switch-center switch-block-no" @click="switchLampBlock(2)">路灯、景观灯</div>
                                    <div id="lampSwitchRight" class="lamp-switch-right switch-block-no" @click="switchLampBlock(3)">5G宏站合杆</div>
                                </div>
                                <div class="descript-chart">
                                    <ul class="left-content">
                                        <li class="">
                                            <span>信号灯总数：</span>
                                            <span>2030</span>
                                            <span>个</span>
                                        </li>
                                        <li class="">
                                            <span>机动车灯总数：</span>
                                            <span>676</span>
                                            <span>个</span>
                                        </li>
                                        <li class="">
                                            <span>人行灯总数：</span>
                                            <span>1354</span>
                                            <span>个</span>
                                        </li>
                                    </ul>
                                    <div id="lampChart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 道路巡查情况名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>道路巡查情况</span>
                            <span id="endTime">截至：2020年10月20日</span>
                        </div>
                        <!-- 道路巡查情况统计图 -->
                        <div class="border-box case-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box road-other-data">
                                <ul class="left-case-data">
                                    <li>
                                        <p>案件总量：<span id="caseNum">676</span>件</p>
                                        <p>已转办：<span id="transferred">124</span>件</p>
                                        <p>未转办：<span id="noTransferred">124</span>件</p>
                                    </li>
                                    <li>
                                        <p>结案率：<span id="closingRate">87%</span></p>
                                        <p>按时：<span id="onTime">87%</span>超时：<span id="overtime">87%</span></p>
                                    </li>
                                </ul>
                                <div id="rightChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Municipal",
        data () {
            return {
                // 地图
                GDMap: null,
            }
        },
        methods: {
            /**
             * Description:高德地图初始化
             * Author:ybt
             * Date:2020/12/17
             */
            initMap() {
                this.GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.GDMap.setFitView();// 执行定位
            },
            /**
             * Description:监听“展开”、“收起”按钮操作
             * Author:ybt
             * Date:2020/12/17
             */
            collapsePage(type){
                if (type === 1) {
                    $('#openPage').css('display', 'none');
                    $('#closePage').css('display', 'block');
                    $('.left-content-row').css('transform', 'translateX(0px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.right-content-row').css('transform', 'translateX(0px)');
                    $('.right-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(0px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                    $('.right-title-name').css('transform', 'translateX(0px)');
                    $('.right-title-name').css('transition', 'transform 0.4s');
                } else if (type === 2) {
                    $('#openPage').css('display', 'block');
                    $('#closePage').css('display', 'none');
                    $('.left-content-row').css('transform', 'translateX(-600px)');
                    $('.left-content-row').css('transition', 'transform 0.4s');
                    $('.right-content-row').css('transform', 'translateX(600px)');
                    $('.right-content-row').css('transition', 'transform 0.4s');
                    $('.left-title-name').css('transform', 'translateX(-600px)');
                    $('.left-title-name').css('transition', 'transform 0.4s');
                    $('.right-title-name').css('transform', 'translateX(600px)');
                    $('.right-title-name').css('transition', 'transform 0.4s');
                }
            },
            /**
             * Description:城市道路——监听市政切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchRoadBlock(type){
                if (type === 1) {
                    $('#roadSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#roadSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#roadSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#roadSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化道路统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initRoadChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("roadChart"));
                let option = {
                    color: ['#23bcef', '#e8b110', '#e06fa0'],
                    legend: {
                        left: 20,
                        top: 20,
                        data: ['主干道', '次干道', '支路'],
                        itemWidth: 12,
                        itemHeight: 12,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series : [
                        {
                            type: 'pie',
                            radius: ['48%', '65%'],
                            center: ['17%', '57%'],
                            label: {
                                show: false
                            },
                            data:[
                                {value: 500, name: '主干道',
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 40,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 12,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold"
                                                },
                                                c: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 14,
                                                    fontWeight: "bold"
                                                }
                                            },
                                            formatter: function(params) {
                                                return "{a|177}{b|条}\n" + "{c|道路数量}";
                                            },
                                            position: 'center',
                                            show: true
                                        }
                                    },
                                },
                                {value: 300, name: '次干道'},
                                {value: 300, name: '支路'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },

                        },
                        {
                            type: 'pie',
                            radius: ['48%', '65%'],
                            center: ['50%', '57%'],
                            label: {
                                show: false
                            },
                            data:[
                                {value: 500, name:'主干道',
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 40,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold",
                                                },
                                                b: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 12,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold",
                                                },
                                                c: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 14,
                                                    fontWeight: "bold"
                                                }
                                            },
                                            formatter: function(params) {
                                                return "{a|266}{b|KM}\n" + "{c|道路长度}";
                                            },
                                            position: 'center',
                                            show: true
                                        }
                                    }
                                },
                                {value: 300, name: '次干道'},
                                {value: 300, name: '支路'}
                            ],
                        },
                        {
                            type: 'pie',
                            radius: ['48%', '65%'],
                            center: ['83%', '57%'],
                            label: {
                                show: false
                            },
                            data:[
                                {value: 500, name:'主干道',
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 40,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 12,
                                                    fontFamily: 'Agency FB',
                                                    fontWeight: "bold"
                                                },
                                                c: {
                                                    color: '#fff',
                                                    align: 'center',
                                                    fontSize: 14,
                                                    fontWeight: "bold"
                                                }
                                            },
                                            formatter: function(params) {
                                                return "{a|6.2}{b|KM²}\n" + "{c|道路面积}";
                                            },
                                            position: 'center',
                                            show: true
                                        }
                                    }
                                },
                                {value: 300, name: '次干道'},
                                {value: 300, name: '支路'}
                            ],
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:监听其他统计（标识牌、隔离设施等）切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchOtherBlock(type){
                if (type === 1) {
                    $('#otherSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#otherSwitchCenter1').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter2').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight1').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#otherSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter1').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#otherSwitchCenter2').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight1').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 3) {
                    $('#otherSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter1').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter2').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#otherSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight1').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 4) {
                    $('#otherSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter1').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter2').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#otherSwitchRight1').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 5) {
                    $('#otherSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter1').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchCenter2').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#otherSwitchRight1').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化其他统计（标识牌、隔离设施等）统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initOtherChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("otherChart"));
                let option = {
                    grid: {
                        top: '10%',
                        right: '5%',
                        left: '18%',
                        bottom: '15%'
                    },
                    xAxis: [{
                        data: ['指示牌', '禁令牌', '警告牌', '其他牌'],
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'bottom',
                    },
                        {
                            data: ['指示牌', '禁令牌', '警告牌', '其他牌'],
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                color: '#fff',
                                fontSize: 14
                            },
                            axisTick: {
                                show: false,
                            },
                            position: 'bottom',
                        },
                    ],
                    yAxis: {
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#4777bf',
                            fontSize: 14
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false
                        },
                        interval: 300
                    },
                    series: [
                        {
                            // 该系列为背景深蓝色半胶囊
                            data: [1200, 1200, 1200, 1200],
                            type: 'bar',
                            xAxisIndex: 0,
                            silent: true,
                            itemStyle: {
                                color: '#2b317a',
                                borderColor: '#2b317a',
                                barBorderRadius: [30, 30, 30, 30],
                                borderWidth: 2,
                            },
                            barWidth: 25,
                            tooltip: {
                                show: false,
                            },
                        },
                        {
                            data: [700, 400, 1100, 900],
                            type: 'bar',
                            xAxisIndex: 1,
                            itemStyle: {
                                barBorderRadius: [30, 30, 30, 30],
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,255,255,1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(255,189,2,1)' // 100% 处的颜色
                                }], false),
                            },
                            barWidth: 25,
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:监听城市排水设施切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchBridgeBlock(type){
                if (type === 1) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-no');
                } else if (type === 3) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:城市桥涵列表滚动效果
             * Author:ybt
             * Date:2020/12/17
             */
            listScrolling(){
                let speed = 60;
                document.getElementById("tableBodyBox1").innerHTML = document.getElementById("tableBodyBox").innerHTML;
                function Marquee() {
                    if (document.getElementById("tableBodyBox1").offsetHeight - document.getElementById("tableBody").scrollTop <= 0) {
                        document.getElementById("tableBody").scrollTop -= document.getElementById("tableBodyBox").offsetHeight;
                    } else {
                        document.getElementById("tableBody").scrollTop++;
                    }
                }
                let MyMar = setInterval(Marquee, speed);
                document.getElementById("tableBody").onmouseover = function() {
                    clearInterval(MyMar);
                };
                document.getElementById("tableBody").onmouseout = function() {
                    MyMar = setInterval(Marquee, speed);
                }
            },
            /**
             * Description:监听城市排水设施切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchDraBlock(type){
                if (type === 1) {
                    $('#draSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#draSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                } else if (type === 2) {
                    $('#draSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#draSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                }
            },
            /**
             * Description:初始化管网统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initPipeChart(){
                let colorIndex = 0;
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("pipeChart"));
                let option = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "-10%",
                        top: "10%",
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: "value"
                    },
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: () => {
                                    if (colorIndex === 3) {
                                        colorIndex = 0;
                                    }
                                    colorIndex ++;
                                    let colors = ['#26c9ff', '#26f8ff', '#009afc'];
                                    return colors[colorIndex - 1]
                                }, //每个数据的颜色
                                fontWeight: "bold",
                                fontSize: 14,
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["雨水检查井：4242座", "污水检查井：4920座", "收水检查井：12716座"]
                    }],
                    series: [{
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: (params) => {
                                    let colors = ['#26c9ff', '#26f8ff', '#009afc'];
                                    return colors[params.dataIndex]
                                }, //每个数据的颜色
                                barBorderRadius: [0, 5, 5, 0],
                            }
                        },
                        barCategoryGap: 40,
                        barWidth: 10,
                        data: [10000000, 30000000, 40000000]
                    },
                        {
                            type: "bar",
                            barWidth: 10,
                            barCategoryGap: 40,
                            barGap: "-100%",
                            data: [50000000, 50000000, 50000000],
                            itemStyle: {
                                normal: {
                                    color: "#213973",
                                    barBorderRadius: [0, 5, 5, 0]
                                }
                            }
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:监听路灯统计切换操作
             * Author:ybt
             * Date:2020/12/17
             */
            switchLampBlock(type){
                if (type === 1) {
                    $('#lampSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#lampSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    this.initLampChart();
                } else if (type === 2) {
                    $('#lampSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchCenter').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#lampSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    this.initLandscapeChart();
                } else if (type === 3) {
                    $('#lampSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                    this.initFiveLine();
                }
            },
            /**
             * Description:初始化信号灯统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initLampChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("lampChart"));
                myChart.clear();
                let option = {
                    series: [
                        {
                            type: 'pie',
                            radius: ['55%', '65%'],
                            center: ['25%', '50%'],
                            data: [{
                                hoverOffset: 1,
                                value: 45,
                                itemStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(209,43,60,1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(235,120,76,1)' // 100% 处的颜色
                                    }], false),
                                },
                                label: {
                                    normal: {
                                        color: '#dd4e43',
                                        align: 'center',
                                        fontSize: 15,
                                        fontWeight: 'bold',
                                        formatter: function(params) {
                                            return "55%\n\n" + "机动车灯";
                                        },
                                        position: 'center',
                                        show: true
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        smooth: true,
                                        lineStyle: {
                                            width: 0
                                        }
                                    }
                                },
                                hoverAnimation: false,
                            },
                                {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        normal: {
                                            smooth: true,
                                            lineStyle: {
                                                width: 0
                                            }
                                        }
                                    },
                                    value: 55,
                                    hoverAnimation: false,
                                    itemStyle: {
                                        color: '#37394e',
                                    },
                                }
                            ]
                        },
                        {
                            type: 'pie',
                            radius: ['55%', '65%'],
                            center: ['75%', '50%'],
                            data: [{
                                hoverOffset: 1,
                                value: 70,
                                itemStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(114,90,247,1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(145,115,244,1)' // 100% 处的颜色
                                    }], false),
                                },
                                label: {
                                    normal: {
                                        color: '#6f57fc',
                                        align: 'center',
                                        fontSize: 15,
                                        fontWeight: '900',
                                        formatter: function(params) {
                                            return "55%\n\n" + "人行灯";
                                        },
                                        position: 'center',
                                        show: true
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        smooth: true,
                                        lineStyle: {
                                            width: 0
                                        }
                                    }
                                },
                                hoverAnimation: false,
                            },
                                {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        normal: {
                                            smooth: true,
                                            lineStyle: {
                                                width: 0
                                            }
                                        }
                                    },
                                    value: 30,
                                    hoverAnimation: false,
                                    itemStyle: {
                                        color: '#37394e',
                                    },
                                }
                            ]
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:初始化路灯、景观灯统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initLandscapeChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("lampChart"));
                myChart.clear();
                let option = {
                    grid: {
                        left: '2%',
                        right: '0%',
                        top: '20%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: {
                        data: ['路灯', '景观灯'],
                        top: 10,
                        right: 10,
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 15
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['主干道', '次干道', '支路'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            // 坐标轴刻度标签
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisTick: {
                                // 是否显示刻度线
                                show: false
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    width: 2,
                                    color: '#123985'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            interval: 200,
                            // 坐标区域分割线
                            splitLine: {
                                show: false
                            },
                            // 坐标轴刻度标签
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisTick: {
                                // 是否显示刻度线
                                show: false
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    width: 2,
                                    color: '#123985'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '路灯',
                            type: 'bar',
                            data: [900, 1000, 500],
                            barWidth: 20,
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#f2cc2c' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#c87a0e' // 100% 处的颜色
                                }], false),
                            },
                        },
                        {
                            name: '景观灯',
                            type: 'bar',
                            data: [500, 600, 250],
                            barWidth: 20,
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#5eeff2' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#108ed0' // 100% 处的颜色
                                }], false),
                            },
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:初始化5G宏站合杆
             * Author:ybt
             * Date:2020/12/17
             */
            initFiveLine(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("lampChart"));
                myChart.clear();
            },
            /**
             * Description:初始化道路巡查其他统计统计图
             * Author:ybt
             * Date:2020/12/17
             */
            initRoadOtherChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("rightChart"));
                let index = 0;
                let colorList = ['#9e101e', '#a02713', '#a04212', '#a0570e', '#eaad1b'];
                let option = {
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '42%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                    },
                    xAxis: {
                        type: 'value',

                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }

                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                margin: 30
                            }
                        },
                        data: ['垃圾堆积', '共享单车乱停放', '井盖丢失', '道路破损', '交通标线不清楚'],
                        axisLabel: {
                            margin: 140,
                            fontSize: 14,
                            align: 'left',
                            color: '#ffffff',
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: colorList[0],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: colorList[1],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: colorList[2],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a4: {
                                    color: '#fff',
                                    backgroundColor: colorList[3],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a5: {
                                    color: '#fff',
                                    backgroundColor: colorList[4],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                }
                            },
                            formatter: function(params) {
                                index++;
                                if (index > 5) {
                                    index = 1
                                }
                                return [
                                    '{a' + index + '|' + index + '}' + '  ' + params
                                ].join('\n')
                            }
                        }
                    },
                    series: [{
                        z: 2,
                        name: 'value',
                        type: 'bar',
                        data: [3.66, 2.86, 1.82, 1.8, 1.53].map((item, i) => {
                            let itemStyle = {
                                color: colorList[i]
                            };
                            return {
                                value: item,
                                itemStyle: itemStyle
                            };
                        }),
                        barWidth: 15,
                        label: {
                            show: true,
                            position: [0,2],
                            color: '#ffffff',
                            fontSize: 12,
                            offset: [5, 0]
                        }
                    }

                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            }
        },
        mounted(){
            document.title = "城市管理市政管理平台";
            // 初始化高德地图
            this.initMap();
            // 初始化道路统计图
            this.initRoadChart();
            // 初始化其他统计（标识牌、隔离设施等）统计图
            this.initOtherChart();
            // 城市桥涵列表滚动效果
            this.listScrolling();
            // 初始化管网统计图
            this.initPipeChart();
            // 初始化路灯统计图
            this.initLampChart();
            // 初始化道路巡查其他统计统计图
            this.initRoadOtherChart();
        }
    }
</script>

<style lang="less">
    .municipal{
        width: 100%;
        height: 13.5rem;
        display: flex;
        flex-direction: column;
        background-color: #04093f;
        line-height: 1.15;
        position: relative;
        overflow-x: hidden;
        cursor: default;
        user-select: none;
        #myMap {
            width: 24rem;
            height: 13.5rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        /* 头部样式 */
        header {
            height: 1.375rem; // 110px
            padding-top: 0.32rem;
            position: relative;
            background: linear-gradient(to bottom, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.9));
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 1.125rem;
                text-align: center;
                span {
                    font-size: 0.7125rem;
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .deadline-box{
                position: absolute;
                left: 0.25rem;
                top: 0.3rem;
                width: 2.7875rem;
                height: 0.525rem;
                line-height: 0.525rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.22rem;
                background: url(../../assets/img/municipal/small-border.png) no-repeat;
                z-index: 100;
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../../assets/img/municipal/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../../assets/img/municipal/big-light.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .center-text{
                position: absolute;
                left: calc(50% - 2.05rem);
                top: 1.35rem; // 108px
                width: 4.1rem;
                height: 0.7625rem;
                line-height: 0.7625rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.35rem;
                background: url(../../assets/img/municipal/big-border.png) no-repeat;
            }
            .collapse-box{
                position: absolute;
                top: 0.15rem;
                right: 0.275rem;
                img{
                    width: 0.4rem; // 32px
                    height: 0.325rem; // 26px
                    cursor: pointer;
                }
                #openPage{
                    display: none;
                }
                #closePage{
                    display: block;
                }
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            font-family: 'FZLTZH_GBK';
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                .left-title-name{
                    position: absolute;
                    left: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/municipal/left-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        left: 3.125rem; // 250px
                    }
                }
                .right-title-name{
                    position: absolute;
                    right: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/municipal/right-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        right: 2.85rem; // 228px
                    }
                }
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
                /* 主体内容公共样式——开始 */
                .border-box{
                    border: 1px solid #18397b;
                    position: relative;
                    margin-top: 0.125rem;
                    .top-light-img{
                        position: absolute;
                        top: 0;
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/municipal/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .bottom-light-img{
                        position: absolute;
                        top: -0.4125rem;
                        left: calc(50% - 2.9375rem);
                        width: 6.2125rem;
                        // width: 5.875rem;
                        height: 0.975rem;
                        background: url(../../assets/img/municipal/light2.png) no-repeat;
                        background-size: 100% 100%;
                        z-index: -1;
                    }
                    .overflow-box{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        font-size: 0.2325rem;
                        /* 选中的切换块样式 */
                        .switch-block-active{
                            font-size: 0.2325rem;
                            color: #23bcef;
                        }
                        /* 未选中的切换块样式 */
                        .switch-block-no{
                            font-size: 0.2rem;
                            color:#ceced5;
                        }
                    }
                }
                /* 小标题名称样式 */
                .every-title-name{
                    position: relative;
                    width: 100%;
                    height: 0.575rem;
                    line-height: 0.575rem;
                    text-align: center;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    #endTime{
                        position: absolute;
                        top: 0.0625rem;
                        right: 0.125rem;
                        color: #ffffff;
                        font-size: 0.15rem;
                    }
                }
                /* 块元素样式 */
                .block-style{
                    height: 1.1875rem; // 95px
                    padding: 0.1rem 0;
                    display: flex;
                    flex-direction: row;
                    li{
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        justify-content: center;
                        align-items: center;
                    }
                    .item-block{
                        border-left: 1px solid #18397b;
                        span:first-of-type{
                            span:first-of-type{
                                font-size: 0.3rem; // 24px
                                color: #23bcef;
                                margin-right: 0.075rem;
                            }
                            span:last-of-type{
                                font-size: 0.2rem;
                                color: #ffffff;
                            }
                        }
                        span:last-of-type{
                            font-size: 0.2rem; // 16px
                            color: #ffffff;
                            margin-top: 0.0625rem;
                        }
                    }
                    .item-name{
                        font-size: 0.225rem; // 18px
                        color: #23bcef;
                    }
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0 0.1875rem 0.25rem;
                    background: linear-gradient(to right, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                    z-index: 10;
                    /* 城市道路 */
                    .city-road{
                        display: flex;
                        flex-direction: column;
                        height: 3.2375rem;
                        .road-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .road-switch-left{
                                width: 3.5875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .road-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 3.9875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .road-switch-left.switch-block-active{
                                background: url(../../assets/img/municipal/1-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .road-switch-right.switch-block-active{
                                background: url(../../assets/img/municipal/1-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .road-switch-left.switch-block-no{
                                background: url(../../assets/img/municipal/1-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .road-switch-right.switch-block-no{
                                background: url(../../assets/img/municipal/1-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        #roadChart{
                            flex: 1;
                        }
                    }
                    /* 消防栓统计 */
                    /* 其他统计（标识牌、隔离设施等） */
                    .other-statistics{
                        display: flex;
                        flex-direction: column;
                        height: 3.2125rem; // 257px
                        .other-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .other-switch-left{
                                width: 1.7rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .other-switch-center1{
                                position: absolute;
                                top: 0;
                                left: 1.325rem;
                                width: 1.75rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .other-switch-center2{
                                position: absolute;
                                top: 0;
                                left: 2.675rem;
                                width: 1.7875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .other-switch-right{
                                position: absolute;
                                top: 0;
                                right: 1.2125rem;
                                width: 1.875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .other-switch-right1{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 1.6625rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .other-switch-left.switch-block-active{
                                background: url(../../assets/img/municipal/2-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-center1.switch-block-active{
                                background: url(../../assets/img/municipal/2-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-center2.switch-block-active{
                                background: url(../../assets/img/municipal/2-3-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-right.switch-block-active{
                                background: url(../../assets/img/municipal/2-4-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-right1.switch-block-active{
                                background: url(../../assets/img/municipal/2-5-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .other-switch-left.switch-block-no{
                                background: url(../../assets/img/municipal/2-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-center1.switch-block-no{
                                background: url(../../assets/img/municipal/2-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-center2.switch-block-no{
                                background: url(../../assets/img/municipal/2-3-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-right.switch-block-no{
                                background: url(../../assets/img/municipal/2-4-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .other-switch-right1.switch-block-no{
                                background: url(../../assets/img/municipal/2-5-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .descript-chart{
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            height: 3.2125rem;
                            .left-content{
                                width: 3.25rem; // 260px
                                border-right: 1px solid #18397b;
                                li{
                                    height: 0.875rem; // 70px
                                    line-height: 0.875rem;
                                    padding-left: 0.25rem;
                                    span:nth-of-type(1){
                                        font-size: 0.2rem; // 16px
                                        color: #ffffff;
                                    }
                                    span:nth-of-type(2){
                                        font-size: 0.3rem; // 24px
                                        color: #23bcef;
                                        margin-right: 0.0625rem;

                                    }
                                    span:nth-of-type(3){
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                    }
                                }
                                li + li{
                                    border-top: 1px solid #18397b;
                                }
                            }
                            #otherChart{
                                width: 3.875rem; // 310px
                                height: 2.625rem; // 210px
                            }
                        }
                    }
                    .city-bridge{
                        display: flex;
                        flex-direction: column;
                        height: 2.9125rem;
                        .bridge-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .bridge-switch-left{
                                width: 2.625rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-center{
                                position: absolute;
                                top: 0;
                                left: 2.1625rem;
                                width: 2.9rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 2.575rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .bridge-switch-left.switch-block-active{
                                background: url(../../assets/img/municipal/3-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-active{
                                background: url(../../assets/img/municipal/3-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-active{
                                background: url(../../assets/img/municipal/3-3-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .bridge-switch-left.switch-block-no{
                                background: url(../../assets/img/municipal/3-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-no{
                                background: url(../../assets/img/municipal/3-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-no{
                                background: url(../../assets/img/municipal/3-3-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .table-head{
                            color:#23bcef;
                            height: 0.575rem;
                            line-height: 0.575rem;
                            tr{
                                height: 0.575rem;
                                line-height: 0.575rem;
                            }
                        }
                        .table-body{
                            height: 1.75rem; // 140px
                            color: #fff;
                            overflow: hidden;
                            tr{
                                height: 0.575rem;
                                line-height: 0.575rem;
                            }
                        }
                        .table-head,.table-body{
                            font-size: 0.2rem;
                            text-align: center;
                            table{
                                border-collapse: collapse;
                                tr {
                                    td{
                                        font-weight: normal !important;
                                        border-bottom: 1px solid #18397b;
                                    }
                                    td:nth-of-type(1){
                                        width: 2.5rem; // 200px
                                    }
                                    td:nth-of-type(2){
                                        width: 3.125rem; // 250px
                                    }
                                    td:nth-of-type(3){
                                        width: 1.5rem; // 120px
                                    }
                                }
                            }
                        }
                    }
                }
                .center-content-row{
                    flex: 1;
                    // width: 9.125rem; // 730px
                }
                .right-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0.25rem 0.1875rem 0;
                    background: linear-gradient(to left, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                    z-index: 10;
                    /* 城市排水设施 */
                    .drainage-facilities{
                        display: flex;
                        flex-direction: column;
                        height: 3.15rem; // 252px
                        .dra-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .dra-switch-left{
                                width: 3.5875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .dra-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 3.9875rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .dra-switch-left.switch-block-active{
                                background: url(../../assets/img/municipal/1-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .dra-switch-right.switch-block-active{
                                background: url(../../assets/img/municipal/1-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .dra-switch-left.switch-block-no{
                                background: url(../../assets/img/municipal/1-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .dra-switch-right.switch-block-no{
                                background: url(../../assets/img/municipal/1-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        #pipeChart{
                            height: 1.375rem;
                            border-top: 1px solid #18397b;
                        }
                    }
                    /* 路灯统计相关 */
                    .lamp-statistics{
                        display: flex;
                        flex-direction: column;
                        height: 3.025rem; // 242px
                        .lamp-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .lamp-switch-left{
                                width: 2.625rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .lamp-switch-center{
                                position: absolute;
                                top: 0;
                                left: 2.1625rem;
                                width: 2.9rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .lamp-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 2.575rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .lamp-switch-left.switch-block-active{
                                background: url(../../assets/img/municipal/3-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .lamp-switch-center.switch-block-active{
                                background: url(../../assets/img/municipal/3-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .lamp-switch-right.switch-block-active{
                                background: url(../../assets/img/municipal/3-3-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .lamp-switch-left.switch-block-no{
                                background: url(../../assets/img/municipal/3-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .lamp-switch-center.switch-block-no{
                                background: url(../../assets/img/municipal/3-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .lamp-switch-right.switch-block-no{
                                background: url(../../assets/img/municipal/3-3-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .descript-chart{
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            height: 2.4375rem; // 195px
                            .left-content{
                                width: 3rem; // 240px
                                border-right: 1px solid #18397b;
                                li{
                                    height: 0.8125rem; // 65px
                                    line-height: 0.8125rem; // 65px
                                    text-align: center;
                                    span:nth-of-type(1){
                                        font-size: 0.2rem; // 16px
                                        color: #ffffff;
                                    }
                                    span:nth-of-type(2){
                                        font-size: 0.3rem; // 24px
                                        color: #23bcef;
                                        margin-right: 0.0625rem;

                                    }
                                    span:nth-of-type(3){
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                    }
                                }
                                li + li{
                                    border-top: 1px solid #18397b;
                                }
                            }
                            #lampChart{
                                width: 4.125rem; // 310px
                                height: 2.625rem; // 210px
                            }
                        }
                    }
                    /* 道路巡查情况统计图——案件、其他 */
                    .case-statistics{
                        height: 2.4625rem; // 197px
                        .road-other-data{
                            display: flex;
                            flex-direction: row !important;
                            .left-case-data{
                                width: 2.625rem; // 210px
                                border-right: 1px solid #18397b;
                                font-size: 0.2rem;
                                color: #ffffff;
                                padding: 0.125rem;
                                li:first-of-type{
                                    border-bottom: 1px solid #18397b;
                                    p{
                                        line-height: 0.4375rem;
                                        #caseNum{
                                            font-size: 0.325rem;
                                            color: #23bcef;
                                            margin-right: 0.125rem;
                                        }
                                    }
                                }
                                li:last-of-type{
                                    padding-top: 0.125rem;
                                    p{
                                        line-height: 0.375rem;
                                        #closingRate{
                                            font-size: 0.275rem;
                                            color: #23bcef;
                                        }
                                        #onTime{
                                            margin-right: 0.1875rem;
                                        }
                                    }
                                }
                            }
                            #rightChart{
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
